<script type="text/ecmascript-6">
    /**
     * Created by wcz on 2017/1/3.
     */
    import b from '../bus'

    export default {
        props: {
            userInfo: {
                default: null
            }
        },
        data () {
            return {
                records: [],
                searchField: '',
                pageIndex: 1,
                pageSize: 45,
                sourceMap: ['锁定车辆奖励', '推荐人奖励', '首次发现车辆奖励', '活动奖励'],
                bgMap: ['b17', 'b10', 'b20', 'b13'],
            }
        },
        computed: {
            isListEmpty () {
                return this.records.length == 0
            }
        },
        created () {
            b.$on('gotcha', () => {
                this.getList()
            })
        },
        mounted () {
            this.changeTitle('车捕头-收入记录');
            if (this.userInfo.id) {
                this.getList();
            }
        },
        methods: {
            getList () {
                let pd = {};

                this.get('/income', pd, {errmsg: '查询收入列表失败，请稍后再试'})
                    .then(res => {
                        this.records = res.data.rows.map(e => {
                                return {
                                    amount: Number(e.amount).toFixed(0),
                                    time: e.last_update_at,
                                    source: this.sourceMap[e.source],
                                    bg: this.bgMap[e.state]
                                }
                            }
                        )
                    })
            }
        }
    }
</script>

<template>
    <div class="list">
        <div class="list__wrapper list__wrapper--gr">
            <ul class="list__box">
                <li v-if="isListEmpty" class="list__empty">
                    暂无收入记录
                </li>
                <li v-else v-for="record in records" class="list__money" layout="column center-left">
                    <div class="list__jag"></div>
                    <div layout="row bottom-left">
                        <p class="list__money-unit">￥</p>
                        <h3 class="list__money-amount">
                            {{record.amount}}
                        </h3>
                    </div>
                    <div class="list__money-source">
                        {{record.source}}
                    </div>
                    <div class="list__money-time">
                        {{record.time}}
                    </div>

                </li>
            </ul>
        </div>
    </div>
</template>